<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            color: white;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #f35336;
            right: 20px;
        }
    </style>
</head>
<body>

<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid dolor doloremque doloribus, eaque
    eligendi error et minus non pariatur quaerat quas quasi, rem repellat sapiente tenetur unde velit voluptates!
</div>
<div>Alias asperiores at atque consequatur distinctio, dolores enim et excepturi fugiat ipsam iste itaque iure iusto
    necessitatibus neque odio provident quae quam quibusdam quis ut vel velit vero voluptatem voluptatum!
</div>
<div>Cupiditate dolores ea, iure labore provident soluta tempora veniam veritatis voluptate! Distinctio doloribus esse
    eveniet fugiat ipsam tempora tenetur? Delectus doloremque eaque ipsam modi nam optio quaerat sint voluptas
    voluptates.
</div>
<div>Ad deleniti distinctio, doloremque ea eaque enim eos eum eveniet ex exercitationem explicabo illum ipsam itaque
    minima nostrum nulla obcaecati possimus quam quis quod quos recusandae saepe tenetur ullam unde.
</div>
<div>Ad aut commodi cum delectus deleniti dolor earum eos exercitationem fuga, harum id labore libero maxime modi
    molestias necessitatibus neque nesciunt non officiis placeat quis repellendus reprehenderit soluta ullam voluptatem.
</div>
<div>Amet at ea, excepturi fugiat iure maxime minima molestiae qui quisquam temporibus! Ducimus fugiat odio, possimus
    provident recusandae sed veritatis voluptatem voluptatibus. Accusamus culpa illo iste officiis reiciendis
    repudiandae tenetur?
</div>
<div>Consequatur corporis cum id tempora. Accusamus ad animi at beatae, ducimus enim, eveniet, id incidunt iste maiores
    nulla quam recusandae sapiente tempore ullam? Aut error esse illo iure minus quam?
</div>
<div>Ab alias asperiores aspernatur aut blanditiis consequatur, deleniti, deserunt dicta dignissimos dolore, doloribus
    eaque eligendi enim eos error excepturi fugiat nesciunt nobis numquam omnis praesentium quibusdam soluta tempore vel
    voluptatibus?
</div>
<div>Adipisci blanditiis dolor doloribus, enim eum fugit itaque necessitatibus numquam, obcaecati possimus quis quod
    recusandae reprehenderit ullam veniam! Fuga illum labore minima necessitatibus non odit porro, unde. Corporis
    molestiae, rerum?
</div>
<div>Adipisci, aliquam amet aut consequuntur corporis cumque delectus dolore error et harum, ipsa iusto magni maiores
    minus molestiae quae quam qui quidem quo repellat sint tempore vel vero vitae voluptatem.
</div>
<div>Aperiam cupiditate eaque esse, facilis impedit incidunt pariatur! At autem consectetur consequuntur deserunt dicta,
    doloremque fuga fugit ipsam magni necessitatibus neque nulla, quae quia! Delectus et eveniet nostrum odio suscipit.
</div>
<div>Adipisci aut consequuntur corporis fugiat hic illo quas vero! Dignissimos, distinctio doloremque dolores dolorum
    harum ipsa, ipsum neque, non nostrum quibusdam sed tempora temporibus voluptate. Nam nulla tempora tempore velit!
</div>
<div>Adipisci aliquid aspernatur cum dicta, distinctio dolor doloribus dolorum ea excepturi exercitationem facilis id,
    impedit iure labore laudantium minus nesciunt nihil obcaecati perferendis possimus quod repellendus sapiente sint
    velit voluptatibus.
</div>
<div>Alias atque consequatur, culpa cumque cupiditate dignissimos eaque eligendi eum impedit ipsum laudantium minus
    neque nesciunt non pariatur perferendis placeat quasi qui reprehenderit, rerum sunt, ullam unde vero. Adipisci,
    ipsam!
</div>
<div>Animi aut autem consectetur debitis, neque quaerat quo rem voluptatem. Animi beatae explicabo, hic id illum nostrum
    perspiciatis quae quidem totam? Accusantium ad consequatur distinctio fugit, odio reiciendis rerum tenetur.
</div>
<div>Aperiam ea esse hic ipsam minus non reiciendis tempora! Dolores, doloribus quia. Aspernatur aut enim fugiat, illum
    quis rerum sit temporibus velit vitae voluptas? Dignissimos dolorum laborum porro quae totam.
</div>
<div>Blanditiis dolore expedita laudantium minus praesentium sapiente sequi sit. Asperiores dolore doloremque earum
    nobis veniam! Accusamus accusantium, dolore dolores hic ipsam maiores molestias quia, ratione recusandae reiciendis
    totam vero, voluptatum.
</div>
<div>Accusantium at beatae blanditiis cumque debitis delectus dolor eligendi eos error et exercitationem fuga id illum
    ipsa laboriosam nam nesciunt nihil numquam praesentium quibusdam quod reiciendis rerum sequi tempore, vitae.
</div>
<div>Ab aliquam architecto, culpa, deleniti dignissimos eius eos ex excepturi illum inventore itaque iure porro quae
    ratione reiciendis sequi sint voluptate. Ab aperiam dolor hic impedit, neque quia quis quos.
</div>
<div>Ad consequuntur culpa earum eligendi fugit, iusto rem suscipit veniam voluptas voluptate! Aperiam consequuntur, cum
    cupiditate eaque explicabo nemo nihil numquam perferendis provident quaerat quos ut. Ipsum non reprehenderit unde?
</div>
<div>A accusantium aliquam aperiam architecto assumenda cum dignissimos ducimus est explicabo hic id ipsam labore
    laboriosam laudantium minima mollitia, nam odio possimus quaerat recusandae rem soluta ullam velit? Impedit,
    perspiciatis.
</div>
<div>Blanditiis consequuntur facere, illum itaque iusto ratione repellendus sed suscipit! Asperiores ex inventore
    nostrum quibusdam voluptates. Aliquid, asperiores at autem cumque, debitis facere fugit ipsa iure necessitatibus,
    placeat qui quos.
</div>
<div>Asperiores aspernatur at atque culpa debitis dolores eius error eum excepturi illo illum in ipsa laborum magni
    maxime mollitia nesciunt omnis qui quia quod repellat sit soluta tenetur vel, voluptatem.
</div>
<div>Ad distinctio dolorum esse et neque possimus quaerat saepe sit! Aperiam, at autem, consequuntur debitis doloribus
    expedita facere illo incidunt necessitatibus omnis placeat repellendus saepe sed sit, soluta tenetur veritatis.
</div>
<div>Accusamus aperiam architecto consequatur cumque eos et excepturi expedita harum id incidunt laboriosam libero
    minima natus nemo nobis non nulla odio pariatur quae quidem reiciendis repudiandae sequi, voluptate? Ex, tempora!
</div>
<div>Architecto earum itaque maxime mollitia necessitatibus. A, animi aspernatur deserunt dolore doloremque, doloribus
    enim explicabo impedit iste laboriosam laborum magni nulla optio possimus quia ratione sequi sint, sit temporibus
    veniam!
</div>
<div>Adipisci assumenda culpa nam odit quaerat quis repudiandae voluptatem. A architecto deserunt, et excepturi ipsa
    magnam magni maiores minima, mollitia nam neque obcaecati optio quo repudiandae sapiente sed soluta voluptate!
</div>
<div>Architecto commodi debitis impedit incidunt minima praesentium provident quas voluptatibus. Adipisci alias animi
    asperiores molestiae mollitia necessitatibus nemo, nisi nostrum nulla, perspiciatis possimus praesentium, quam
    quidem quis sapiente suscipit totam!
</div>
<div>Animi aperiam asperiores consequatur cum delectus dolorem ea, enim esse, eum excepturi fugit inventore ipsa ipsam
    laboriosam laudantium magni modi necessitatibus odit quasi quibusdam quisquam ratione repellendus ullam ut
    voluptatum?
</div>
<div>Assumenda blanditiis dolorem ea, eum ipsa quod repellendus repudiandae. Dignissimos dolores error maiores nisi
    reprehenderit sequi tempore. Debitis, est et explicabo magnam mollitia nam nisi odit quasi quidem rerum vitae?
</div>
<div>Alias architecto asperiores blanditiis delectus, excepturi exercitationem in molestiae numquam omnis possimus quam,
    quos reiciendis sequi! Consequatur corporis earum eligendi explicabo in labore laborum maiores numquam odit quos
    sed, unde.
</div>
<div>Aliquam aperiam doloribus ea exercitationem maxime? At atque culpa distinctio dolorum ea eaque eius enim est ipsam
    laborum quae, quasi qui quisquam quo quos recusandae reprehenderit repudiandae sequi vero voluptatum.
</div>
<div>Ad architecto delectus et eum facilis id inventore iure maxime necessitatibus, neque, perspiciatis placeat, quas
    quos temporibus velit! Et nihil quisquam voluptatum! Distinctio dolorem eius expedita, fugiat perspiciatis
    temporibus voluptate.
</div>
<div>Ab, assumenda blanditiis cumque deserunt, dolores eaque illum ipsam labore laboriosam laudantium libero maxime nam
    nemo officia placeat quod rem repellat reprehenderit repudiandae sequi tenetur ut vel? Dolor, eligendi sequi.
</div>
<div>Accusamus animi atque commodi culpa deleniti, dolore dolorem dolorum ea enim esse exercitationem fugit illo illum
    laboriosam minima modi molestiae necessitatibus nesciunt nostrum officiis omnis quod quos, rerum sint totam!
</div>
<div>Dignissimos dolorum, earum et impedit inventore maiores, nostrum, odit officia pariatur perspiciatis rerum sequi
    suscipit tenetur! Culpa eius id minima nam quas? Autem cumque est facere minus, sed totam vitae.
</div>
<div>Aperiam architecto aspernatur aut autem distinctio dolore doloremque, expedita fuga id ipsum iusto magni molestias
    mollitia natus nihil officiis placeat quam qui quod ratione recusandae, sit, suscipit ullam unde vero!
</div>
<div>Dolor error expedita reprehenderit? Aliquid aperiam cumque dignissimos illo itaque laboriosam, libero maiores
    numquam pariatur possimus quibusdam quisquam sapiente tempore veritatis voluptas? Eius enim fugiat magni nam nihil
    perspiciatis, unde?
</div>
<div>Ad dolorem doloremque error labore natus, nesciunt nisi saepe sint sunt unde! Adipisci asperiores, consequatur
    delectus doloremque dolores ea et exercitationem maiores natus nisi porro quod, quos recusandae rerum velit?
</div>
<div>Debitis, dolor doloremque dolorum est nisi quaerat repudiandae velit veritatis voluptatum. Aspernatur blanditiis
    deserunt dignissimos mollitia quis veniam voluptatem! Dicta dignissimos dolor magnam non provident quasi repellat
    repellendus repudiandae sed.
</div>
<div>Eius illo libero rerum ullam. Consectetur dolorem dolorum, eligendi est ex fugiat harum, in laudantium minima
    molestias nulla odit perferendis quae quam repellat repudiandae sed temporibus ut, velit vitae? Perferendis?
</div>
<div>A ab, asperiores, aspernatur aut consectetur corporis cumque dicta distinctio dolorem expedita in iusto modi
    molestiae mollitia non quia tempore. Assumenda cupiditate excepturi harum necessitatibus nihil possimus quod quos
    vel!
</div>
<div>A adipisci alias amet at blanditiis deleniti deserunt dignissimos dolore exercitationem, id impedit in itaque
    laborum libero, nemo numquam officiis omnis optio possimus quas qui recusandae repudiandae ut voluptatem voluptatum.
</div>
<div>Animi asperiores, consectetur corporis cumque doloremque ea et explicabo laudantium libero maiores maxime molestiae
    omnis possimus ratione reprehenderit repudiandae saepe sit temporibus ut voluptate. Beatae fugiat illo in ipsum
    quibusdam.
</div>
<div>Amet cupiditate deserunt dicta distinctio, est fuga fugiat quasi voluptas voluptate? A aspernatur commodi
    consequuntur debitis eligendi est, facere ipsum iure laborum maxime, minus mollitia nobis numquam soluta tempora,
    vel!
</div>
<div>Ad aliquid amet autem ducimus nostrum praesentium quae quas temporibus! Adipisci aperiam autem dolorem, dolores
    eius eos inventore ipsam modi, mollitia nam nulla possimus quisquam, repudiandae sed sequi totam veritatis!
</div>
<div>Alias aperiam asperiores autem commodi consectetur cumque debitis dolorem doloremque eos et fuga fugiat fugit ipsam
    iusto laudantium magni minima molestias, mollitia nam optio quaerat quam quibusdam quo tempora ullam!
</div>
<div>Animi cupiditate eligendi expedita, iste libero magnam placeat provident qui quibusdam recusandae rem reprehenderit
    saepe ullam vel veritatis! Commodi culpa eum in quo suscipit. Architecto asperiores doloribus mollitia officiis
    sunt.
</div>
<div>Accusamus accusantium at dicta, dolorem ea enim eos inventore ipsam molestias, neque perspiciatis porro quaerat,
    sapiente soluta sunt totam ut. Ab assumenda eveniet fuga magnam odit perferendis saepe sed totam?
</div>
<div>Assumenda cumque illo nostrum tempora. Alias aliquam aliquid, aspernatur beatae cumque debitis deserunt doloribus
    ducimus explicabo hic incidunt iste magni maiores minima odit quaerat quam quisquam quod reiciendis rerum suscipit.
</div>
<div>Amet commodi dicta eius eos esse eum explicabo fuga impedit in magnam maiores minima molestiae molestias nam
    necessitatibus nesciunt numquam praesentium quas quia quo ratione, tempora temporibus! Iste, magnam, officiis.
</div>
<div>Accusamus cum error ex minus, nostrum sit voluptatem voluptatum? Aliquam architecto commodi cumque dignissimos
    dolorem dolorum est excepturi harum id, officia, porro quidem quos, ratione similique sit veniam voluptatem
    voluptatibus.
</div>
<div>A aperiam architecto assumenda commodi culpa, doloremque esse et expedita fugiat id in ipsum magnam, necessitatibus
    nemo nisi obcaecati optio possimus quam quas ratione reiciendis sint sunt vitae. Possimus, unde?
</div>
<div>Commodi odit suscipit voluptas! Aperiam architecto distinctio eligendi officia officiis perferendis quae, quod
    ullam voluptate. Ab, accusantium at blanditiis dolor dolores eius ex, mollitia necessitatibus optio, quae quisquam
    quo sint!
</div>
<div>Blanditiis consequuntur corporis deleniti, dignissimos eligendi fuga fugit inventore itaque libero minima molestias
    nisi quidem quis, saepe tempore temporibus vitae. Consequatur eum incidunt nesciunt non quo reprehenderit tempora
    totam ut.
</div>
<div>Ipsum labore minima nisi quam ratione recusandae repellendus soluta. Aut eius labore libero nam obcaecati porro
    quam? Ad aliquam ea est fugit laboriosam, libero molestiae, non nulla odit quo repudiandae!
</div>
<div>Accusamus ad asperiores autem beatae consectetur consequatur culpa debitis deleniti distinctio dolor enim explicabo
    fuga itaque iusto maiores minima molestiae mollitia non porro possimus recusandae rerum, soluta temporibus
    veritatis, voluptatum!
</div>
<div>Ad aliquid animi aut beatae consequuntur dignissimos eos ex fuga harum laudantium libero minima minus nobis
    officiis perferendis porro quaerat quam quibusdam, quisquam repellat saepe soluta suscipit vel, velit voluptate!
</div>
<div>Animi assumenda at commodi facere itaque iure labore libero magni modi nihil optio quae quaerat quisquam quo
    ratione recusandae reprehenderit saepe sit veniam, veritatis vero voluptatibus voluptatum! Commodi, laudantium
    reiciendis.
</div>
<div>Architecto beatae earum error esse eveniet laudantium magnam nisi non, obcaecati officiis omnis perspiciatis,
    possimus quasi quod rem repellendus soluta unde voluptas. Cum dolor eaque magnam sunt totam, vero. Tempora!
</div>
</body>
</html>